<!DOCTYPE html>
<html>
<head>
	<title>淘宝小图标动画</title>
	<meta charset="utf-8">
	<style type="text/css">
	*{margin: 0px;padding: 0px;}
	#move{
		width: 400px;
		margin: 10px auto;
		border:1px solid #ccc;
		background-color: blue; 
	}
	#move a{
		display: inline-block;
		width: 58px;
		height: 25px;
		border:1px solid #ddd;
		border-radius: 3px;
		background-color:#fff;
		text-align: center;
		margin: 10px 17px;
		position: relative;
		padding-top: 40px;
		color: #9c9c9c;
		font-size: 12px;
		text-decoration: none; 
		line-height: 25px;
		overflow: hidden;
	}
	#move a i{
		position: absolute;
		top: 15px;
		left: 0px;
		display: inline-block;
		width: 100%;
		text-align: center;
		filter: alpha(opacity=100);
		opacity: 1;
	}
	#move a:hover{
		color: #f00;
	}
	#move img{
		border:none;
	}
	</style>
	<script src="js/move.js"></script>
	<script type="text/javascript">
		window.onload=function(){
			var oMove = document.getElementById('move');
			var aList = oMove.getElementsByTagName('a');
			for (var i = 0; i < aList.length; i++) {
				aList[i].onmouseover = function(){
					var _this = this.getElementsByTagName('i')[0];
					startMove(_this,{top:-15,opacity:0},function(){
						_this.style.top = 25+'px';
						startMove(_this,{top:15,opacity:100});
					});
				}
			}
		}
	</script>
</head>
<body>
	<div id="move">
		<a href="#"><i><img src="images/phone.png"/></i><p>话费</p></a>
		<a href="#"><i><img src="images/game.png"/></i><p>游戏</p></a>
		<a href="#"><i><img src="images/food.png"/></i><p>外卖</p></a>
		<a href="#"><i><img src="images/finance.png"/></i><p>理财</p></a>
		<a href="#"><i><img src="images/insurance.png"/></i><p>保险</p></a>
		<a href="#"><i><img src="images/movie.png"/></i><p>电影</p></a>
		<a href="#"><i><img src="images/travel.png"/></i><p>旅行</p></a>
		<a href="#"><i><img src="images/music.png"/></i><p>音乐</p></a>
	</div>
</body>
</html>